<template>
  <div class="login">
    <el-container>
      <el-header>
        <h2>Fiber Home Control System</h2>
      </el-header>
      <el-container>
        <el-aside width="200px">logo</el-aside>
        <el-container>
          <el-main>
            <el-form
              :model="LoginForm"
              status-icon
              :rules="loginRules"
              ref="LoginRef"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item prop="useraccount">
                <template slot="label">
                  <i class="el-icon-user"></i> 账号
                </template>
                <el-input
                  type="text"
                  v-model="LoginForm.useraccount"
                  autocomplete="off"
                >
                </el-input>
              </el-form-item>
              <el-form-item prop="password">
                <template slot="label">
                  <i class="el-icon-lock"></i> 密码
                </template>
                <el-input
                  type="password"
                  v-model="LoginForm.password"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-checkbox v-model="isRemberAccount">记住密码</el-checkbox>
                <el-link>忘记密码</el-link>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="loginClick">登陆</el-button>
                <el-button type="success" @click="resetClick">重置</el-button>
              </el-form-item>
            </el-form>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
import localCache from "../../utils/localCache";
import { Login, getUserInfoByID } from "../../network/login";
const { mapActions } = createNamespacedHelpers("login");
export default {
  name: "login",
  data() {
    return {
      LoginForm: {
        useraccount: "",
        password: "",
      },
      isRemberAccount: false,
      loginRules: {
        useraccount: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
    };
  },
  watch: {
    isRemberAccount: {
      handler: function (newValue, oleValue) {
        if (!newValue) {
          localCache.deleteCache("useraccount");
          localCache.deleteCache("password");
        } else {
          localCache.setCache("useraccount", this.LoginForm.useraccount);
          localCache.setCache("password", this.LoginForm.password);
        }
      },
    },
    "LoginForm.useraccount"(newUsername) {
      if (this.isRemberAccount) {
        localCache.setCache("useraccount", newUsername);
      }
    },
    "LoginForm.password"(newPassword) {
      if (this.isRemberAccount) {
        localCache.setCache("password", newPassword);
      }
    },
  },
  mounted() {
    if (localCache.getCache("useraccount") && localCache.getCache("password")) {
      this.LoginForm.useraccount = localCache.getCache("useraccount");
      this.LoginForm.password = localCache.getCache("password");
      this.isRemberAccount = true;
    }
  },
  methods: {
    ...mapActions(["loginAction"]),
    loginClick() {
      this.$refs.LoginRef.validate(async (validate) => {
        if (validate) {
          const loginRes = await Login(this.LoginForm);
          if (loginRes.success) {
            const { token, userId } = loginRes.result;
            const userInfoRes = await getUserInfoByID({
              userId,
            });
            if (userInfoRes.success) {
              const { roleNames, username } = userInfoRes.result;
              this.loginAction({
                ...this.LoginForm,
                token,
                userId,
                roleNames,
                username,
              });
              localCache.setCache("userinfo", this.$store.state.login);
              this.$message({
                message: "登陆成功",
                type: "success",
              });
              this.$router.push({
                path: "/main",
              });
            }
          }
        }
      });
    },
    resetClick() {
      this.$refs.LoginRef.resetFields();
    },
  },
};
</script>

<style lang="stylus" scoped>
.login
  width 800px
  height: 600px
  text-align: center
  position:absolute
  top: 50%
  left 50%
  margin-left: -(@width/2)
  margin-top: -(@height/2)
  .el-container
    width: 100%
    height: 100%
    .el-header
      background-color #cbe3fe
    .el-aside
      background-color #33ceab
    .el-main
      background-color #ccc
    .el-form
      width: 500px
      margin-top: 100px
.remberaccount
  background-color #ccc
  border: 0
.remberButton
  background-color #ccc
  border: 0
.el-link
  margin-left: 10px
  vertical-align: baseline
</style>
